<template>
	<view class="page">
        
        <!-- 弹窗层 -->
        <view class="share-container" v-show="shareShow" @click="closeShare()">
            <div class="share-info" @click.stop>
                <view class="share-poster"><image :src="posterImg" mode="widthFix"></image></view>
                <view class="share-tool">
                    <view class="share-friend">
                        <button open-type="share">
                            <text class="iconfont icon-fenxiang"></text> 分享给好友
                        </button>
                    </view>
                    <view class="share-save-img" @click="savaImg()"><text class="iconfont icon-xiazai"></text>保存图片</view>
                </view>
                <div class="share-close" @click.stop="closeShare()"><text class="iconfont icon-guanbi"></text></div>
            </div>
        </view>
        <!-- 弹窗层 -->
		<view class="list-header">
			<view class="list-header-img">
				<image src="/image/list_header_index.png"></image>
			</view>
			<view bindtap="changeSort" class="list-header-sort">
				<span :class="navActive === 'news'?'check':''" @click="getList('news')">最新</span>
				<span class="red-dot" v-if="navActive === 'news'"></span>
				<span class="line">|</span>
				<span :class="navActive === 'hot'?'check':''" @click="getList('hot')">热门</span>
                <span class="red-dot" v-if="navActive === 'hot'"></span>
                <span class="line">|</span>
				<span :class="navActive === 'contribute'?'check':''" @click="getList('contribute')">网友投稿</span>
                <span class="red-dot" v-if="navActive === 'contribute'"></span>
			</view>
		</view>
		<view class="main-list">
			<view class="main-list-item" v-for="(item,index) in lists" :key="item.id">
				<view class="main-item-article" hoverClass="main-item-article-hover">
					<text class="article-text">{{item.content}}</text>
				</view>
				<view class="main-item-sidebar">
					<view class="like" hoverClass="class-hover" :data-id="item.id" :data-index="index" @click="like($event)">
						<view class="like-image">
                            
                            <block v-if="likeStatus[item.id]">
                            <uni-icons type="heart-filled" size="30" color="#e66060"></uni-icons>
                            </block>
                            <block v-else>
                            <uni-icons type="heart" size="30"></uni-icons>    
                            </block>
							
						</view>
						<view class="like-num-area">
							<uni-badge size="small" :max-num="maxNum" :text="item.hits.toString()" absolute="rightBottom" type="error">
							</uni-badge>
						</view>
					</view>
                    <!-- #ifdef MP -->
                   <!-- <button open-type="share" class="share" hoverClass="class-hover" :data-id="item.id" :data-index="index">
                        <text class="iconfont icon-fenxiang1"></text>
                    </button> -->
                    <view  class="share" hoverClass="class-hover" :data-id="item.id" :data-index="index" @click="openShare($event)">
                        <text class="iconfont icon-fenxiang1"></text>
                    </view>
                    
                    <!-- #endif -->
                     <!-- #ifdef H5 -->
					<view class="share" hoverClass="class-hover" :data-id="item.id" :data-index="index" @click="share($event)">
                        <text class="iconfont icon-fenxiang1"></text>
					</view>                     
                    <!-- #endif -->

					<view class="copy" hoverClass="class-hover" :data-id="item.id" :data-index="index" @click="copy($event)">
                        <text class="iconfont icon-fuzhi"></text>
					</view>
				</view>
			</view>
		</view>
        <uni-load-more :status="loadCfg.status" :color="loadCfg.color" :contentText="loadCfg.texts" v-show="showLoad"></uni-load-more>
        <view class="to-top" @click="toTop"><text class="iconfont icon-zhiding"></text></view>
	</view>
</template>

<script>
    import util from "@/common/util.js"
	export default {
		data() {
			return {
                navActive:'news', //导航选中
                showLoad:false,
                loadCfg:{
                    status:'more',
                    color:'#FFFFFF',
                    texts:{contentdown: "上拉加载更多",contentrefresh: "正在加载...",contentnomore: "抱歉亲爱的，没有数据了~"}
                },
                title:'朋友圈说说-经典短语【凡人阁】',
				maxNum: 9999,
				lists: [
                    // {id: 1,content: '我吹过你吹过的晚风，那我们算不算相拥'}
				],
                likeStatus:{}, //点赞状态
                posterImg:'', //海报图片
                shareShow:false,    //分享弹窗状态
			}
		},
        onLoad(){
          //加载数据
          console.log('onLoad')
          this.getList();  
        },
        onPullDownRefresh(){
           this.getList(this.navActive); 
           setTimeout(function () {
                   uni.stopPullDownRefresh();
           }, 1000); 
        },
        //滚动到底翻页
        onReachBottom() { 
          this.getList();  
        },
        onShareAppMessage(res){
            console.log(res);
            let index = res.target.dataset.index;
            let content = this.lists[index].content;
            return {
                title:this.title,
                path:'/pages/index/index',
                content:content,
                desc:content
            }
        },
        
		methods: {
            /**
             * 获取数据
             */
            getList(type=false){
                let _this = this,postData = {};
                this.loadCfg.status = 'loading';
                //重新获取
                if(type){ 
                    _this.navActive = type;
                    postData.type=type;
                    _this.lists=[]; 
                }
                util.post('/api/content/getList',postData,function(res){
                    let datas = res.data;
                    // #ifndef H5
                    datas = JSON.parse(datas); //微信小程序需要转换一下
                    // #endif
                    if(datas.code === 1 && datas.data !== null && datas.data.length ){
                        for(let i=0;i<datas.data.length;i++){
                           _this.lists.push(datas.data[i]);
                        }
                        _this.loadCfg.status = 'more';
                        _this.showLoad  = true;
                    }else{
                        _this.showLoad  = true;
                        _this.loadCfg.status = 'noMore';
                    }
                })
            },
            /**点赞
             * @param {Object} e
             */
			like(e) {
                let _this = this;
                
                let id = e.currentTarget.dataset.id,index = e.currentTarget.dataset.index;
                util.post('/api/content/addLike',{id:id},function(r){
                    let data = r.data;
                    // #ifndef H5
                    data = JSON.parse(data);
                    // #endif
                    if( data.code === 1 ) {
                        _this.$set(_this.likeStatus,id,true); //更新喜欢的状态
                        _this.lists[index].hits+=1; //数量+1
                        // uni.showToast({
                        //     title: '感谢您的点赞',
                        //     duration:1000
                        // });        
                    } else {
                        util.showError(r.msg);
                    }
                })
			},
			share(e) {
                let _this = this;
                // let index = e.currentTarget.dataset.index;
                // let content = _this.lists[index].content;
                //#ifndef APP-PLUS || H5
                uni.showShareMenu({
                    title:_this.title,
                    path:'/pages/index/index',
                    // content:content,
                    // desc:content
                });
                //#endif
                //#ifdef APP-PLUS
                uni.share({
                    
                })
                //#endif
                //#ifdef H5
                let url = window.location.href;
                this.$copyText(url).then(function(e) {
                    uni.showModal({
                        content:'链接复制成功，去粘贴发送给好友吧~',
                        showCancel:false,
                    })
                }, function(e) {
                	uni.showToast({
                		title: '链接复制失败~',
                		duration: 1000,
                		icon: "error"
                	});
                })
                //#endif
			},
			copy(e) {
				let index = e.currentTarget.dataset.index;
				let content = this.lists[index].content;
				// #ifdef H5
				this.$copyText(content).then(function(e) {
					uni.showToast({
						title: '语录复制成功',
						duration: 1000
					});
				}, function(e) {
					uni.showToast({
						title: '复制失败',
						duration: 1000,
						icon: "error"
					});
				})
				// #endif
				// #ifndef H5
				uni.setClipboardData({
					data: content,
					success: function() {
						uni.showToast({
							title: '语录复制成功',
							duration: 1000
						});
					},
					fail: function() {
						uni.showToast({
							title: '语录复制失败',
							duration: 1000,
							icon: "error"
						});
					}
				});
				// #endif
			},
            /**
             * 返回头部
             */
            toTop(){
              uni.pageScrollTo({
                  scrollTop: 0,
                  duration: 500
              });  
            },
            /**
             * 分享层
             * @param {Object} e
             */
            openShare(e){
                let id = e.currentTarget.dataset.id,_this = this;
                uni.showLoading({
                   title:'图片生成中...', 
                });
                util.post('/api/content/createPoster',{id:id},function(r){
                    let data = r.data;
                    // #ifndef H5
                    data = JSON.parse(data);
                    // #endif
                    console.log(data);
                    if( data.code === 1 ) {
                       _this.posterImg = data.data.img; 
                       _this.shareShow = !_this.shareShow;
                    } else {
                        util.showError(r.msg);
                    }
                    uni.hideLoading();
                });
                
            },
            /**
             * 关闭分享层
             */
            closeShare(){
                this.shareShow = !this.shareShow;
            },
            savaImg(){
                
                let _this = this;
                //#ifdef H5
                uni.showModal({
                    content:'请长按图片保存或发送给朋友',
                    showCancel:false,
                })
                //#endif
                //#ifndef H5
                uni.downloadFile({
                    url:_this.posterImg,
                    success:function(res){
                        let file = res.tempFilePath;
                        uni.saveImageToPhotosAlbum({
                            filePath:file,
                            success:function(res){
                                _this.shareShow = !_this.shareShow;
                                uni.showToast({
                                	title: '图片保存成功',
                                	duration: 1000
                                });
                            },
                            error:function(){
                                uni.showToast({
                                	title: '图片保存失败',
                                	duration: 1000
                                });
                            }
                        })
                    },
                    error:function(res){
                        uni.showToast({
                            title: '网络请求错误',
                            duration: 1000
                        });
                    }
                })
                //#endif
            }
        }
	}
</script>
<style>
	@import url("index.css");
</style>
